<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>food list</title>
 <script src="/spring-merchant/js/bootstrap/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap.min.css" >
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap-theme.min.css">
    <script src="/spring-merchant/js/bootstrap/bootstrap.min.js"></script>
	
	<script src="/spring-merchant/js/dist/sweetalert-dev.js"></script>
    <link href="/spring-merchant/css/dist/sweetalert.css" rel="stylesheet">
    <script src="/spring-merchant/js/dist/sweetalert.min.js"></script>
	 <link rel="stylesheet" href="/spring-merchant/css/food.css">
</head>
<body>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Food Detail</h4>
                </div>
                <div class="modal-body">
                    <form  action="/spring-merchant/foods/edit" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <input type="hidden" name="id">
                            <label for="exampleInputEmail1">Food Name</label>
                            <input type="text" class="form-control"  name="name" >
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Food Price</label>
                            <input type="text" class="form-control"  name="price" > 
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Food Type</label>
                            <select class="form-control" name="categoryId" id="modal_c_select">
                                
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <input type="file" id="foodimg" name="foodImage">
                            <p class="help-block">Choose a new nice pictures to increase your food appetite</p>
                        </div>
                    <div class="checkbox">
                        <label>
                            <input type="hidden">
                        </label>
                    </div>
                    <button id="updateFoodBtn" type="submit" class="btn btn-primary" >Change</button>
                </form>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">&nbsp;&nbsp;&nbsp;Close&nbsp;&nbsp;&nbsp;</button>
                   <!--  <button type="button" class="btn btn-primary" id="saveFoodChange">Save changes</button> -->
                </div>
            </div>
        </div>
    </div>
    <div id="main-div">
   <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                <img src="/spring-merchant/image/login.jpg" alt="merchant">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>Food manager <small></small></h1>
            </div>
			<%@include file="../../user_nav.jsp"%>
        </div>
    </div>
       <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
    <!--隔离空白区美观-->
           <!-- <div class="menu-blank-block"></div>  --> 
    <!--选项栏-->
           <%//@include file="../../menu_nav.jsp"%>

				<div class="console-menu">
					<ul class="nav nav-pills nav-stacked">
						<li crole="presentation" class="menu-li"><a
							href="/spring-merchant/views/orders">Order Management</a></li>
						<li role="presentation" class="active menu-li"><a
							href="/spring-merchant/views/foods">Food Management</a></li>
						<li role="presentation" class="menu-li"><a
							href="/spring-merchant/views/comments">Comment Management</a></li>
						<li role="presentation" class="menu-li"><a
							href="/spring-merchant/views/advertisement">Advertisement Management</a></li>
					</ul>
				</div>
			</div>
        <div class="operationarea">
            <div id="food-type-choose-nav">
                <ul id="category-list" class="nav nav-pills">
                </ul>
            </div>
            <div id="show-food-area" >
                <!--食物展示模板-->
               <!--   <div id="food-model" class="col-xs-3 col-md-4 show-food-list hidden-food-pattern" >
                    <div class="thumbnail">
                    <a id="food-img" href="#" class="thumbnail">
                        <img  src="adv1.jpg" alt="..."> 
                        <div class="caption">
                            <h3 id="food-name">Food Name</h3>
                            <p id="food-type">Food Type</p>                            
                            <p id="food-price">$ Price</p>
                            <a href="javascript:void(0);" value="sssss" id="aaaaa" class="btn btn-warning btn-lg show-food-detail" role="button" >Delete</a>
                            <a href="javascript:void(0);" class="btn btn-primary btn-lg show-food-detail" role="button" data-toggle="modal" data-target="#myModal">Detail</a>
                        </div>
                    </a>
                    </div>
                </div>
                -->
            </div>
        </div>
        </div>
    </div>

<script type="text/javascript">
(function(){
	var obj={};
	//用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
	obj.ajax = function(type, url, data, headers, context, callback){
		$.ajax({
			type: type,
			url: url,
			data: JSON.stringify(data),
			headers: headers,
			context:context
		}).done(callback);
	};
	   window.ajaxRequest = obj;
    })();
    
function FoodMainPage(templateOfCategories,templateOfFoods){
	  var self = this;
    this.modelOfCategories = null;
    this.modelOfFoods = null;
    this.templateOfCategories = templateOfCategories;
    this.templateOfFoods= templateOfFoods;
      /*获取菜品种类*/
    this.findAllCategories = function(){
	     ajaxRequest.ajax("GET","/spring-merchant/categories",null,null,this,function(categories){
		        this.modelOfCategories = categories;
		        _render_Categories(this.modelOfCategories);
	     });
    };
    
    /*根据菜品种类和商家id获取商家爱列表*/
    this.findFoods = function(typeId){
	     ajaxRequest.ajax("GET","/spring-merchant/foods?food_type_id="+typeId,null,null,this,function(foods){
		        this.modelOfFoods = foods;
		        _render_Foods(this.modelOfFoods);
	     });
    };
   
     /*根据菜品id删除菜品*/
     deleteFoods = function(id){
	     ajaxRequest.ajax("DELETE","/spring-merchant/foods/"+id,null,null,this,function(){
		        /*this.modelOfFoods = foods;
		        _render_Foods(this.modelOfFoods);*/
	     });
     };
     
    function _render_Categories(data){
	     templateOfCategories.empty();
        $("#category-list").append($("<li value='all' id='category-type-per' class='active'  role='presentation'></li>").append($("<a href='javascript:void(0);'></a>").text("All")));
	     data.forEach(function(item){
	    	 $("#category-list").append($("<li value='"+item.id+"' id='category-type-per' role='presentation'></li>").append($("<a href='javascript:void(0);'></a>").text(item.type)));
	     });
         /*添加增加食物按钮，跳转到增加食物的界面，需要修改href*/
         $("#category-list").append($("<li role='presentation' class='active'><a href='/spring-merchant/views/foods/add'>Add Food</a></li>"));
	     $("li#category-type-per").click(function(){
           $(this).siblings().filter(".active").removeClass("active");
           $(this).addClass("active");
           console.log($(this).attr("value"));
           self.findFoods($(this).attr("value"));
	     });
     }
    
    function _render_Foods(data){
    	templateOfFoods.empty();
        data.forEach(function(item){
            var div1 = $("<div id='food-model' class='col-xs-2 col-md-3 show-food-list'></div>");
            var div2 = $("<div class='thumbnail'></div>"); 
            var a1 = $("<a href='javascript:void(0);' class='thumbnail'>");
            var img = $("<img id='food-img' src='"+item.image+"' alt=' '>");
            var div3 =  $("<div class='caption'>");
            var h3 = $("<font></font>").addClass("food-name").text(item.name);
            var p_type = $("<p></p>").text(item.categories);
            var p_price = $("<p></p>").text("￥"+item.price);
            var a_delete = $("<a href='javascript:void(0);' class='btn btn-warning btn-lg show-food-detail' role='button' value='"+item.id+"'>Delete</a>");
            var a_detail = $("<a href='javascript:void(0);' class='btn btn-primary btn-lg show-food-detail' role='button' data-toggle='modal' data-target='#myModal'>Detail</a>");
            div3.append(h3).append(p_type).append(p_price).append(a_delete).append(a_detail);
            div1.append(div2.append(a1).append(img).append(div3));
            templateOfFoods.append(div1); 
            /*需要添加点击进入详情页面
            以及其他*/
            a_detail.on("click", function(){
                $("input[name=id]").val(item.id);
                $("input[name=name]").val(item.name);
                $("input[name=price]").val(item.price);
                $("input[name=categoryId]").val(item.categories)
                
                ajaxRequest.ajax("GET","/spring-merchant/categories",null,null,this,function(categories){
    		        this.modelOfCategories = categories;
    		        _render_Categories_select(this.modelOfCategories);
    	     });
                
               function _render_Categories_select(data){
            	   $("#modal_c_select").empty();
  			     data.forEach(function(item){
  			    	 $("#modal_c_select").append(($("<option>")).attr("value",item.id).text(item.type));
  			     });
                }
                
            });
            /*添加删除food操作*/
            a_delete.on("click", function(){
                var foodPanel = $(this);
                function deleteNode(){
                    deleteFoods(foodPanel.attr("value"));
                    foodPanel.parent().parent().parent().parent().remove();
                }
                swal({
                    title: "Are you sure?",
                    text: "You will delete you food!!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: false
                    },
                    function(isConfirm){
                        if (isConfirm) {
                            swal("Deleted!", "Your food was deleted.", "success");
                            deleteNode();
                        } else {
                            swal("Cancelled", "Your have save your food :)", "error");
                        }
                    });
            });
        });
      }
}
$(function(){
    var mainPage = new FoodMainPage($("#category-list"), $("#show-food-area"));
    mainPage.findAllCategories();
    mainPage.findFoods("all");
    
});
</script>

 <script type="text/javascript" src="/spring-merchant/js/websocket.js"></script>
</body>
</html>